
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-05 12:30:26
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\adminUser\index.tsx
 * jiu
 */
import { useState, useEffect } from 'react'
import './index.scss'
import { Space, Table, Tag, Tooltip, Modal, Button, Input, Switch, Form, Select } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { useNavigate } from 'react-router-dom'

function AdminUser() {
    const [form] = Form.useForm();
    let navigate = useNavigate()
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        status: boolean
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '管理员名称',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '角色权限',
            dataIndex: 'age',
            // render: (_, item) => (
            //     <>
            //         <Tooltip title={item.age}>
            //             <p className='tableP'>{item.age}</p>
            //         </Tooltip>
            //     </>
            // ),
        },
        {
            title: '创建时间',
            dataIndex: 'address',

        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (_, item) => (
                <>
                    {item.status ? <p className='green'><span className='dot greenBg'></span> 已开启</p> : <p className='red'><span className='dot redBg'></span> 已关闭</p>}
                </>
            ),

        },
        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    <a href='#' onClick={() => setIsLog(true)}>操作日志</a>
                    <a href='#'>编辑</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            status: false,
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            status: true,
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            status: false,
        },

    ];

    const [datas, setDatas] = useState(data)



    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);


    //账号日志
    const [isLog, setIsLog] = useState(false);



    //取消
    const cancel = () => {
        setIsModalOpen(false);
        form.resetFields();
    }

    //成功走得
    const onFinish = (values: any) => {
        console.log('Success:', values);
        // setIsModalOpen(false);
    };

    //失败走得
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // setIsModalOpen(false);
    };

    let [formData, setFormData] = useState({ username: "恩我说" })



    let [searchLog, setSearchLog] = useState([
        { time: "2023-05-30 11:12:32", text: "登录成功sd3213312321837128392713917398371298231717239开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签”" },
        { time: "2023-05-30 11:12:32", text: "登录成功sd3213312321837128392713917398371298231717239开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签”开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了“湖边场景标签” 开发 新增了" },
    ])
    //日志搜索框input
    let [searchLogValue, setSearchLogValue] = useState('')
    const searchLogInput = (event: any) => {
        if (event.key === 'Enter') {
            console.log(searchLogValue, "你要搜索吗");

        }
    }

    return (
        <div className='intention adminUser'>
            <div className='title'>
                <Button type="primary" onClick={() => setIsModalOpen(true)}>+ 创建管理员账号</Button>
            </div>
            <Table columns={columns} dataSource={datas} />


            <Modal title="创建管理账号" open={isModalOpen} onCancel={() => { cancel() }} keyboard footer={null}>

                <Form
                    name="basic"
                    labelCol={{ span: 12, offset: 10 }}
                    wrapperCol={{ span: 100 }}
                    style={{ maxWidth: 600, marginTop: "20px" }}
                    initialValues={formData}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                    layout='vertical'
                >
                    <div className='flex'>
                        <Form.Item label="用户名" style={{ width: "168px", }} rules={[{ required: true, message: '请输入用户名' }]} name="username">
                            <Input placeholder="不超过10字" maxLength={10} />
                        </Form.Item>
                        <Form.Item label="备注" style={{ width: "320px", marginLeft: "10px" }} name="remark">
                            <Input placeholder="不超过30字" maxLength={30} />
                        </Form.Item>
                    </div>


                    <div className='flex'>
                        <Form.Item label="角色选择" style={{ width: "168px", }} rules={[{ required: true, message: '请选择角色' }]} name="roleChoices">
                            <Select>
                                <Select.Option value="demo">运维</Select.Option>
                                <Select.Option value="demo1">开发</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="密码设置" style={{ width: "320px", marginLeft: "10px" }}
                            name='password'
                            rules={[
                                { required: true, message: '请输入密码' },
                                {
                                    validator: (_, value) => {
                                        let reg = /^[0-9a-zA-Z]+$/

                                        return reg.test(value) ? Promise.resolve() : Promise.reject(new Error('reg.test(value)'))
                                    }

                                },
                            ]}>
                            <Input.Password placeholder="数字及英文字符" />
                        </Form.Item>
                    </div>



                    <Form.Item wrapperCol={{ offset: 8, span: 16 }} >
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button htmlType="button" onClick={() => { cancel() }} className='ml_10'>
                            取消
                        </Button>
                    </Form.Item>
                </Form>


            </Modal>




            <Modal title="账号日志" open={isLog} onCancel={() => { setIsLog(false) }} keyboard footer={null}>

                <div className='searchLog'>
                    <div className='searchLogInput'>
                        <Input placeholder="搜索日志 Enter键确认" onKeyDown={(e) => { searchLogInput(e) }} value={searchLogValue} onInput={(event) => setSearchLogValue((event.target as HTMLInputElement).value)} />
                    </div>


                    <div className='searchLogBody'>
                        <ul>
                            {searchLog.length > 0 && searchLog.map((item, index) => {
                                return (<li key={index}>
                                    <p>{item.time}</p>
                                    <p>{item.text}</p>
                                </li>)
                            })}
                        </ul>
                    </div>
                </div>




            </Modal>


        </div>
    )
}

export default AdminUser
